<template>
  <div id="index">
    <div class="card" style="border: 1px solid #e8e8e8;padding:10px">
      <a-row :gutter="16">
        <a-col :span="8">
          <a-card title="选择医院" style="width: 100%" hoverable>
            <a-input-search
              slot="extra"
              style="width: 120px"
              @search="onSearch"
            />
            <div class="list">
                <div class="item" v-for="(item,index) in 8" :key="index">
                    <img src="https://img1.baidu.com/it/u=700272840,4290124229&fm=11&fmt=auto&gp=0.jpg" alt="">
                    <div>西南医院</div>
                    <div style="font-size:12px">公立三甲</div>
                </div>
            </div>
          </a-card>
        </a-col>
        <a-col :span="8">
          <a-card title="选择科室" style="width: 100%">
            <a-input-search
              slot="extra"
              style="width: 120px"
              @search="onSearch"
            />
            <div class="list-Department">
                <div class="item" v-for="(item,index) in 16" :key="index">
                    <div style="font-size:12px">临床科室</div>
                </div>
            </div>
          </a-card>
        </a-col>
        <a-col :span="8">
          <a-card style="width: 100%" hoverable>
            <a-date-picker @change="onChange" slot="title" :locale="locale"/>
            <div class="right-top" slot="extra">
               <span style="color:#00C8AA">有号</span> 约满
            </div>
            <div class="week">
              <div class="wekkItem">一</div>
              <div class="wekkItem">二</div>
              <div class="wekkItem">三</div>
              <div class="wekkItem">四</div>
              <div class="wekkItem">五</div>
              <div class="wekkItem">六</div>
              <div class="wekkItem">日</div>
            </div>
            
          </a-card>
        </a-col>
       
      </a-row>

      <a-row :gutter="16" style="margin-top:10px">
         <a-col :span="8">
          <a-card title="选择医生" style="width: 100%">
            <a-input-search
              slot="extra"
              style="width: 120px"
              @search="onSearch"
            />
            <div class="list">
                <div class="item" v-for="(item,index) in 8" :key="index">
                    <img src="https://dss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=1579555037,3222228481&fm=26&gp=0.jpg" alt="" style="width:60px;height:60px">
                    <div>张医生</div>
                </div>
            </div>
          </a-card>
        </a-col>
        <a-col :span="16">
          <a-card title="预约时间" style="width: 100%;overflow-x: hidden;overflow-y: scroll;">
            <!-- <p slot="extra">more</p> -->
            <div class="time-item">
              <div class="item" v-for="(item,i) in 28" :key="i">
                <div class="left">
                  <div class="time">09:00-09:30</div>
                  <p>剩余号数:0</p>
                </div>
                <div class="right">
                  <a-button type="primary" size="small">
                  立即预约
                </a-button>
                </div>
              </div>
            </div>
          </a-card>
        </a-col>
      </a-row>
    </div>
  </div>
</template>

<script>
import locale from 'ant-design-vue/es/date-picker/locale/zh_CN';
import moment from 'moment';
import 'moment/locale/zh-cn';
moment.locale('zh-cn');
export default {
  data(){
    return {
      locale,
    }
  },
  methods:{
    onSearch(){},
    change(){},
    onChange(){}
  }
};
</script>

<style lang="scss" scoped>
.ant-card-body{
    padding: 14px;
    
}
.ant-card-bordered{
      height: 320px;
}
//卡片
.list{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    .item{
        width: 22%;
        height: 100px;
        border-radius: 5px;
        background-color: #EAEAEA;
        padding-top: 10px;
        margin-bottom: 10px;
        text-align: center;
        min-width: 50px;
        img{
            width: 40px;
            height: 40px;
            border-radius: 50%;
        }

    }
}

.list-Department{
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  .item{
        width: 22%;
        height: 40px;
        line-height: 40px;
        border-radius: 5px;
        background-color: #EAEAEA;
        margin-bottom: 20px;
        text-align: center;
        min-width: 50px;
        img{
            width: 40px;
            height: 40px;
            border-radius: 50%;
        }

    }
}

.week{
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.time-item{
  display: flex;
  flex-wrap: wrap;
  
    justify-content: space-between;
  .item{
    display: flex;
    align-items: center;
    width: 25%;
    margin-bottom: 20px;
    .left{
      .time{
        font-size: 16px;
        font-family: Microsoft YaHei;
        font-weight: bold;
        color: #666666;
        line-height: 23px;
      }
      p{
        font-size: 12px;
        font-family: Microsoft YaHei;
        font-weight: 400;
        color: #999999;
      }
    }
    .right{
      margin-left: 10px;
    }
  }
}

</style>